<template>
  
  <div class="errorpage" ref="bgstar" id="bgstar">
    <img  class="errorimg" src="@/assets/images/404.png" alt="">
<span
    v-for="(l,i) in spanNum" :key="i"
    class="span-dots"
    :style="{top:l.y,left:l.x,transform:'scale(' + l.scaler + ')',animationDelay:l.rate,backgroundColor:l.rgb}"
>

</span>
  </div>
</template>


<script>
export default {
     mounted(){
        console.log(window.devicePixelRatio)
        this.starInit()
    },
    methods:{
        ranFun(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        },
        starInit(){
            var screenW = document.getElementById('bgstar').offsetWidth; 
            var screenH = this.$refs.bgstar.offsetHeight;  

            for (var i = 0; i < 550; i++) { 
                //位置随机
                var x = Math.floor(Math.random() * screenW);
                var y = Math.floor(Math.random() * screenH);
                //大小随机
                var scaler = Math.random() * 1.5;
                //频率随机
                var rate = Math.random() * 2.5;
                var r = this.ranFun(10, 250);
                var g = this.ranFun(10, 250);
                var b = this.ranFun(10, 250);
                this.spanNum.push({
                    x: x + "px",
                    y: y + "px",
                    scaler: scaler,
                    rate: rate + "s",
                    rgb: `rgb(${r},${g},${b})`
                });
            }
        }
    },
    data(){
        return {
            spanNum:[]
        }
    }
}
</script>

<style lang="scss">
.errorpage{
    width:100%;
    height:100%;
    overflow: hidden;
    background: rgba(0,0,0,1);
    position: relative;
    // display:flex;
    // justify-content: center;
    // align-items: center;
    .errorimg{
        width:280px;
        height:280px;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        // border:1px solid #fff; /* no  */
    }
}

.span-dots {
    position: absolute;
    animation: flash 2s alternate infinite;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    // background: #fff;
  }
  @keyframes flash {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }
</style>